<template>
    <!-- Form -->
    <el-button text @click="updatepass = true">修改密码</el-button>

    <el-dialog v-model="updatepass" title="修改密码">
        <el-form 
            :model="ruleForm" 
            ref="ruleForm" 
            status-icon
            :rules="rules" 
            class="demo-ruleForm">
            <el-form-item label="请输入原密码" label-width="140px">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="请输入新密码" label-width="140px">
                <el-input type="password" v-model="ruleForm.newpass" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="请确认密码" label-width="140px">
                <el-input type="password" v-model="ruleForm.checkpass" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="resetForm()">清空</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkpass !== '') {
                    this.$refs.ruleForm.validateField('checkpass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newpass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            updatepass:false,
            ruleForm: {
                password: '',
                newpass: '',
                checkpass: '',
            },
            rules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: "用户密码的长度在6~18个字符",
                        trigger: 'blur'
                    },
                    { validator: validatePass, trigger: 'blur' }
                ],
                newpass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: "用户密码的长度在6~18个字符",
                        trigger: 'blur'
                    },
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkpass: [
                    { required: true, message: '请确认新密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '用户密码的长度在6~18个字符',
                        trigger: 'blur'
                    },
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        submitForm() {
            this.$axios({
                method: "post",
                url: "http://localhost:8080//pass/word",
                data: this.$qs.stringify({password:this.ruleForm.newpass})
            }).then(res => {
                console.log(res.data);
                this.persons = res.data;
                if (res.data.code == 1) {
                    ElMessage('修改成功');
                    this.$router.go(-1);
                } else {
                    console.log("error");
                }
            })
        },
        resetForm() {
            this.ruleForm.password = "",
            this.ruleForm.newpass = "",
            this.ruleForm.checkpass = ""
        },
        
    }
};
</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
